import React, { useEffect } from 'react';

import './index.less';

const App = () => {
  function handClick(event) {
    const target = event.target;
    // 判断点击的是否为tab元素或其子元素
    if (
      target.classList.contains('tabs-fillet-corner-item') ||
      target.closest('.tabs-fillet-corner-item')
    ) {
      // 获取当前被点击的tab元素
      const tab = target.closest('.tabs-fillet-corner-item') || target;

      // 判断点击的是否为当前激活的tab元素
      if (!tab.classList.contains('tabs-fillet-corner-item-active')) {
        // 移除当前激活的tab和内容
        const activeTab = tabContainer.querySelector(
          '.tabs-fillet-corner-item-active',
        );
        activeTab.classList.remove('tabs-fillet-corner-item-active');

        // 添加新的激活的tab和内容
        tab.classList.add('tabs-fillet-corner-item-active');
      }
    }
  }
  useEffect(() => {
    // 获取tab容器元素
    const tabContainer = document.querySelector('.tabs-fillet-corner');

    // 通过事件代理给tab添加点击事件
    tabContainer.addEventListener('click', (e) => handClick(e));
  }, []);
  return (
    <>
      <div className="tabs-fillet-corner">
        <div className="tabs-fillet-corner-item-wrap">
          <div className="tabs-fillet-corner-item tabs-fillet-corner-item-active">
            <p className="tabs-fillet-corner-item-text">唱</p>
          </div>
        </div>
        <div className="tabs-fillet-corner-item-wrap">
          <div className="tabs-fillet-corner-item">
            <p className="tabs-fillet-corner-item-text">跳</p>
          </div>
        </div>
        <div className="tabs-fillet-corner-item-wrap">
          <div className="tabs-fillet-corner-item">
            <p className="tabs-fillet-corner-item-text">rap</p>
          </div>
        </div>
        <div className="tabs-fillet-corner-item-wrap">
          <div className="tabs-fillet-corner-item">
            <p className="tabs-fillet-corner-item-text">篮球</p>
          </div>
        </div>
      </div>
    </>
  );
};

export default App;
